<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="jq/jQuery.js"></script>
	<style>
		*{
			margin: 0px;
			padding: 0px;
			list-style: none;
			text-decoration: none; 
		}
		#box{
			max-width: 1020px;
            margin: 20px auto;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            height: 700px;
            position: relative;
            height: 1200px;
		}
		#imgBox{
			background-image: url('image/eg2.jpg');
			text-align: center;
            height: 600px;
            width: 600px;
            background-size:contain;
            background-repeat: no-repeat;
            border-right: 1px solid rgba(0, 0, 0, 0.2);
            margin-top: 15px;
            margin-bottom: 15px;
            float: left;
            margin-right: 20px;
            position: absolute;
		}
		#productDetail{
			margin-top: 15px;
            margin-bottom: 15px;
			float: left;
			width: 350px;
			font-weight: 500;
			line-height: 25px;
			position: absolute;
			top: 20px;
			right: 24px;
			height:77%;
		}
		#description{
			display:inline-block;
			height:10%;
		}
		hr{
        	border: none;
            height: 1px;
            background-color: rgba(0, 0, 0, 0.2);
            width: 100%;
            margin: 20px auto;  
        }
        #Guarantee{
        	height: 95px;
        }
        #Guarantee>ul li{
        	float: left;
        	display: inline-block;
        	width: 150px;
        	height: 20px;
        	text-align: left;
        	background: url('image/tick.png') no-repeat left center;
        	background-size: 13px;
        	font-size: 13px;
        	line-height: 18px;
        	padding-left: 20px;
        	margin: 2px 0px;
        }
        #sellerImg{
        	width: 55px;
        	float: left;
        	margin-right: 20px;
        	float: left;
        }
        #sellerName{
        	font-weight: 600;
			line-height: 25px;
			color: black;
			font-size: 17px;
			display: inline-block;
			width: 190px;
			margin-bottom: 5px;
        }
        .enterBtn{
        	color: rgba(0, 0, 0, 0.5);
        	font-size: 13px;
        }
        #quantitySold{
        	color: rgba(0, 0, 0, 0.3);
        }
        #totalQuantity{
        	text-align: center;
        	outline: 0;
        	border: none;
        	line-height: 20px;
        	float: right;
        }
        .btn{
        	border: 1px solid rgba(0, 0, 0, 0.3);
        	border-radius: 10px;
        	line-height: 19px;
        	text-align: center;
        	width: 20px;
        	height: 20px;
        	float: right;
        	cursor: pointer;
        }
        #purBox{
        	margin-top: 70px;
        	position: relative;
        }
        #sub{
        	display: inline-block;
        	width: 250px;
        	height: 38px;
        	border: none;
        	outline: 0;
        	margin-top: 100px;
        	background-color: #01C2C3;
        	color: rgb(255, 255, 255);
        	border-radius: 2px;
        	cursor: pointer;
        }
        #remainingQuantity{
        	float: right;
        	font-size: 12px;
        	color: red;
        	margin-top: 10px;
        	margin-right: 3px;
        }
        #minusBtn{
        	margin-left: 200px;
        }
        #myCollection{
        	display: inline-block;
        	background-color: rgb(255, 255, 255);
        	border: none;
        	width: 95px;
        	height: 38px;
        	border: 1px solid rgba(0, 0, 0, 0.2);
        	border-radius: 2px;
        	font-weight: 500;
        	position: absolute;
        	bottom: 0px;
        	right: 0px;
        	cursor: pointer;
        }
        #sub:hover{
        	background-color: #01BCBD;
        }
        #myCollection:hover{
        	background-color: #FCFCFC;
        }
        #enterSeller:hover{
        	border:1px solid rgba(0, 0, 0, 0);
        }
        #fenjie{
        	position: absolute;
        	top: 635px;
        	width: 96%;
        }
        #productReviews{
        	position: absolute;
        	width: 96%;
        	left: 15px;
        	padding: 20px;
        	top: 55%;
        	max-height: 520px;
        	overflow-y: auto;
        	overflow-x: hidden;
        }
        .reviews00001{
        	width: 100%;
        	max-height: 150px;
        	padding: 5px;
        	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
        .reviews00001 img{
        	width: 30px;
        	border-radius: 50%;
        	margin-left: 10px;
        	vertical-align: middle;
        	display: inline-block;
        	margin-bottom:10px;
        	margin-right:20px;
        }
        #productReviews h2{
        	display: inline-block;
        	margin: 10px;
        }
        .nickName{
        	vertical-align: middle;
        	display: inline-block;
        	font-size: 12px;
        }
        .reviewText{
        	width: 98%;
        	max-height: 100px;
        	background-color: rgba(0, 0, 0, 0.1);
        	border-radius: 5px;
        	padding: 5px 10px;
        	font-size: 13px;
        	margin-bottom:10px;
        }
        #report,#deleteReviews{
        	float: right;
        	font-size: 14px;
        	padding: 2px 7px;
        	color: black;
        	border: 1px solid rgba(0, 0, 0, 0);
        }
        #report:hover,#deleteReviews:hover{
        	border: 1px solid rgba(0, 0, 0, 0.1);
        }
        .qty{
        	display: inline-block;
        	margin-top: 17px;
        	font-size: 12px;
        	float: right;
        }
        #imgBox img{
        	height:100%;
        }
	</style>
</head>
<body>
<%@ include file="header.jsp" %>
	<div id="box">
		<div id="imgBox">
			<img src="${sdrVo.goodsDetail.goodsImg }">
		</div>
		<div id="productDetail">
			<span id="description">
				${sdrVo.goodsDetail.description }
			</span>
			<br>
			<span style="font-size: 12px;font-weight: 600;">
				￥
			</span>
			<span id="price">
				${sdrVo.goodsDetail.price }
			</span>
			<hr>
			<div id="Guarantee">
			    <ul>
			    	<li>假一赔三</li>
			    	<li>七天无理由退货</li>
			    	<li>退货包运费</li>
			    	<li>售后保修</li>
			    	<li>全场包邮</li>
			    	<li>逐件检查</li>
			    	<li>防伪包装</li>
			    </ul>
			</div>
			<hr>
			<a href="#" id="enterSeller">
				<img src="${sdrVo.seller.sellerImg }" id="sellerImg">
				<span id="sellerName">${sdrVo.seller.brandName }</span>
				<span class="enterBtn">进入品牌&nbsp&nbsp></span>
				<span id="quantitySold">已售：${sdrVo.sellerSold }</span>
			</a>
			<hr>
			<div id="purBox">
				<form action="payment.do" method="post" onsubmit="return checkquantity()">
					<button type="button" id="addBtn" class="btn">+</button>
			    	<input type="text" size="3" name="totalQuantity" id="totalQuantity" value="1">
			    	<button type="button" id="minusBtn" class="btn">-</button>
			    	<span id="remainingQuantity">剩余库存：${sdrVo.goodsDetail.quantity }</span>
			    	<input type="text" style="display:none" value="${sdrVo.goodsDetail.goodsId }" name="goodsId">
			    	<input type="submit" id="sub" value="立即购买">
			    	<button type="button" id="myCollection">♡想要</button>
				</form>
		    </div>
		</div>
		<hr id="fenjie">
		<div id="productReviews">
			<h2>评论</h2>
			<span class="qty">已有${sdrVo.totalSold }人购买过此商品</span>
			<c:if test="${not empty sdrVo.userReview}">
    			<c:forEach items="${sdrVo.userReview}" var="rev" varStatus="stat">
    				<div class="reviews00001">
    					<img src="${rev.headImg }" class="headImg">
						<span class="nickName">${rev.nickName }</span>
						<!-- <a href="#" id="report">举报</a>
						<a href="#" id="deleteReviews">删除</a> -->
			    		<!-- 最大字符144个 -->
						<div class="reviewText">
							${rev.review.reviewContext }
						</div>
    				</div>
    			</c:forEach>
			</c:if>
	    </div>
	</div>
<%@ include file="footer.jsp" %>
</body>
<script>
	//增加购买数量
	document.getElementById("addBtn").addEventListener("click",function(){
		var totalQuantity = document.getElementById("totalQuantity");
		var maxQuantity = document.getElementById("remainingQuantity").textContent;
		var number = maxQuantity.match(/\d+/)[0];
		if(parseInt(totalQuantity.value)+1>=number){
			totalQuantity.value = number;
		}else{
			totalQuantity.value = parseInt(totalQuantity.value)+1;
		}
	})

	//减少购买数量
	document.getElementById("minusBtn").addEventListener("click",function(){
		var totalQuantity = document.getElementById("totalQuantity");
		if(parseInt(totalQuantity.value)-1<=1){
			totalQuantity.value = 1;
		}else{
			totalQuantity.value = parseInt(totalQuantity.value)-1;
		}
	})

	//输入框输入非法值自动失去焦点自动修改
	document.getElementById("totalQuantity").addEventListener('blur', function(event) {
		var totalQuantity = document.getElementById("totalQuantity");
		var maxQuantity = document.getElementById("remainingQuantity").textContent;
		var number = maxQuantity.match(/\d+/)[0];
		if(totalQuantity.value>=number){
			totalQuantity.value = number;
		}else if(totalQuantity.value<=1){
			totalQuantity.value = 1;
		}
	});

	//添加收藏
	document.getElementById("myCollection").addEventListener("click",function(){
		var myCollection = document.getElementById("myCollection").textContent;
		if (myCollection == "♡想要") {
			document.getElementById("myCollection").textContent = "❤想要";
		}else if(myCollection == "❤想要"){
			document.getElementById("myCollection").textContent = "♡想要";
		}
	})
	function checkquantity(){
		var maxQuantity = document.getElementById("remainingQuantity").textContent;
		var number = maxQuantity.match(/\d+/)[0];
		if(number<=0){
			alert("该商品没有库存");
			return false;
		}
		return true;
	}
</script>
</html>